<template>
  <div v-if="question" class="section">
    <div>{{question.topic}}</div>
    <view-i-paragraph v-if="question.type === 'paragraph'"></view-i-paragraph>
    <view-i-text v-else-if="question.type === 'input'" :question="question"></view-i-text>
    <view-i-radio v-else-if="question.type === 'radio'" :question="question"></view-i-radio>
    <view-i-checkbox v-else-if="question.type === 'checkbox'" :question="question"></view-i-checkbox>
    <view-i-datetime v-else-if="question.type === 'datetime'" :question="question"></view-i-datetime>
    <view-i-switch v-else-if="question.type === 'switch'" :question="question"></view-i-switch>
    <view-i-image v-else-if="question.type === 'image'" :question="question"></view-i-image>
    <view-i-table v-else-if="question.type === 'table'" :question="question"></view-i-table>
    <div v-else>恩...这个类型的问题还真不支持!-{{question.topic}}</div>
  </div>
</template>

<script>
  import ViewIText from "./iText"
  import ViewICheckbox from "./iCheckbox"
  import ViewIParagraph from "./iParagraph"
  import ViewIRadio from "./iRadio"
  import ViewIDatetime from "./iDatetime"
  import ViewISwitch from "./iSwitch"
  import ViewIImage from "./iImage"
  import ViewITable from "./iTable"

  export default {
    components: {
      ViewITable,
      ViewIImage,
      ViewISwitch,
      ViewIDatetime,
      ViewIRadio,
      ViewIParagraph,
      ViewICheckbox,
      ViewIText},
    name: "qa-view-ctrl",
    props: ['question'],
    created() {
    },
    mounted() {
      console.log('-----看看question---',this.question)
    }
  }
</script>

<style lang="scss">
  .section{
    margin:10px 5px;
    padding:5px;
    display: flex;
    flex-direction: column;
    border:1px solid #cccccc;
    .topic{
      background-color: #efefef;
      height: 30px;
      line-height: 24px;
      padding:4px 6px;
      label{
        box-sizing: border-box;
        display: inline-block;
        min-width: 150px;
        width: calc(100% - 100px);
      }
    }
  }
</style>
